import React from 'react';
import { 
  Typography, 
  Container, 
  Box, 
  Paper, 
  Grid, 
  Card, 
  CardContent, 
  Chip, 
  Avatar,
  Fade,
  Grow
} from '@mui/material';
import { styled, keyframes } from '@mui/material/styles';
import { 
  School, 
  Code, 
  Psychology, 
  Analytics, 
  Timeline,
  EmojiEvents,
  Group,
  Lightbulb
} from '@mui/icons-material';

// 动画关键帧
const fadeInUp = keyframes`
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;

const float = keyframes`
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
`;

const shimmer = keyframes`
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
`;

const glow = keyframes`
  0%, 100% {
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(102, 126, 234, 0.6);
  }
`;

const pulse = keyframes`
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
  }
`;

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const slideInUp = keyframes`
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;

// 主容器样式
const MainContainer = styled(Container)(({ theme }) => ({
  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  minHeight: '100vh',
  paddingTop: theme.spacing(4),
  paddingBottom: theme.spacing(4),
}));

// 主要内容纸张样式
const MainPaper = styled(Paper)(({ theme }) => ({
  background: 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
  borderRadius: '24px',
  padding: theme.spacing(4),
  boxShadow: '0 20px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.05)',
  backdropFilter: 'blur(10px)',
  border: '1px solid rgba(255,255,255,0.2)',
  animation: `${fadeInUp} 0.8s ease-out`,
}));

// 标题样式
const GradientTitle = styled(Typography)(({ theme }) => ({
  background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  WebkitBackgroundClip: 'text',
  WebkitTextFillColor: 'transparent',
  backgroundClip: 'text',
  fontWeight: 800,
  textAlign: 'center',
  marginBottom: theme.spacing(3),
  position: 'relative',
  '&::after': {
    content: '""',
    position: 'absolute',
    bottom: '-10px',
    left: '50%',
    transform: 'translateX(-50%)',
    width: '100px',
    height: '4px',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    borderRadius: '2px',
  },
}));

// 特性卡片样式
const FeatureCard = styled(Card)(({ theme }) => ({
  height: '100%',
  background: 'linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)',
  borderRadius: '24px',
  padding: theme.spacing(3),
  border: '1px solid rgba(255,255,255,0.3)',
  boxShadow: '0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(255,255,255,0.05)',
  transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
  position: 'relative',
  overflow: 'hidden',
  backdropFilter: 'blur(10px)',
  '&::before': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: '4px',
    background: 'linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4)',
    borderRadius: '24px 24px 0 0',
  },
  '&::after': {
    content: '""',
    position: 'absolute',
    top: 0,
    left: '-100%',
    width: '100%',
    height: '100%',
    background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent)',
    transition: 'left 0.6s',
  },
  '&:hover': {
    transform: 'translateY(-12px) scale(1.03) rotateX(5deg)',
    boxShadow: '0 25px 50px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.1)',
    animation: `${glow} 2s ease-in-out infinite`,
    '&::after': {
      left: '100%',
    },
  },
}));

const AboutPage: React.FC = () => {
  return (
    <MainContainer maxWidth="xl">
      <MainPaper elevation={0}>
        <Fade in timeout={800}>
          <GradientTitle variant="h3" sx={{
            background: 'linear-gradient(45deg, #667eea 0%, #764ba2 50%, #f093fb 100%)',
            backgroundSize: '200% 200%',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
            animation: `${shimmer} 3s ease-in-out infinite`,
            textShadow: '0 0 30px rgba(102, 126, 234, 0.3)',
          }}>
            🎓 关于BrainAI项目
          </GradientTitle>
        </Fade>

        <Grow in timeout={1000}>
          <Box my={5}>
            <Typography 
              variant="h6" 
              sx={{ 
                color: '#4a5568',
                lineHeight: 1.8,
                mb: 4,
                background: 'linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%)',
                padding: 3,
                borderRadius: '12px',
                border: '1px solid rgba(255,255,255,0.2)',
                boxShadow: '0 4px 16px rgba(0,0,0,0.05)',
                textAlign: 'center'
              }}
            >
              BrainAI是一个基于深度学习的脑肿瘤智能诊断系统，旨在为医疗专业人员提供准确、快速的诊断辅助工具。
              本项目结合了最新的人工智能技术与医学影像分析，致力于推动医疗AI技术的发展与应用。
            </Typography>

            {/* 项目特点 */}
            <Grid container spacing={4} sx={{ mb: 6 }}>
              {[
                {
                  icon: <Psychology sx={{ fontSize: 50, color: '#667eea' }} />,
                  title: '🧠 深度学习技术',
                  description: '采用卷积神经网络(CNN)架构，通过深度学习算法实现对MRI图像的智能分析和分类',
                  details: ['PyTorch框架', 'CNN架构', '迁移学习', '数据增强']
                },
                {
                  icon: <Analytics sx={{ fontSize: 50, color: '#4ECDC4' }} />,
                  title: '📊 高精度识别',
                  description: '经过大量医学数据训练，模型在验证集上达到97.33%的准确率，确保诊断结果的可靠性',
                  details: ['97.33%准确率', '7023张训练图像', '4类肿瘤识别', '交叉验证']
                },
                {
                  icon: <Timeline sx={{ fontSize: 50, color: '#FF6B6B' }} />,
                  title: '⚡ 实时处理',
                  description: '优化的模型架构和推理引擎，实现毫秒级的图像处理速度，满足临床实时诊断需求',
                  details: ['毫秒级响应', '云端部署', 'GPU加速', '批量处理']
                },
                {
                  icon: <Code sx={{ fontSize: 50, color: '#96CEB4' }} />,
                  title: '🔧 现代化架构',
                  description: '采用前后端分离的现代化架构，提供直观友好的用户界面和稳定可靠的后端服务',
                  details: ['React前端', 'Flask后端', 'RESTful API', '响应式设计']
                }
              ].map((feature, index) => (
                <Grid size={{ xs: 12, md: 6 }} key={index}>
                  <Fade in timeout={1200 + index * 200}>
                    <FeatureCard>
                      <CardContent sx={{ p: 0 }}>
                        <Box sx={{ textAlign: 'center', mb: 3 }}>
                          <Box sx={{ 
                            animation: `${float} 3s ease-in-out infinite`,
                            '&:hover': {
                              animation: `${rotate} 2s linear infinite`,
                            }
                          }}>
                            {feature.icon}
                          </Box>
                        </Box>
                        <Typography 
                          variant="h5" 
                          component="h3" 
                          gutterBottom
                          sx={{ 
                            fontWeight: 700,
                            color: '#2d3748',
                            textAlign: 'center',
                            mb: 2
                          }}
                        >
                          {feature.title}
                        </Typography>
                        <Typography 
                          variant="body1" 
                          sx={{ 
                            color: '#4a5568',
                            lineHeight: 1.6,
                            mb: 3,
                            textAlign: 'center'
                          }}
                        >
                          {feature.description}
                        </Typography>
                        <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap', justifyContent: 'center' }}>
                          {feature.details.map((detail, idx) => (
                            <Chip 
                              key={idx}
                              label={detail}
                              size="small"
                              sx={{ 
                                backgroundColor: 'rgba(102, 126, 234, 0.1)',
                                color: '#667eea',
                                fontWeight: 600
                              }}
                            />
                          ))}
                        </Box>
                      </CardContent>
                    </FeatureCard>
                  </Fade>
                </Grid>
              ))}
            </Grid>

            {/* 技术栈详情 */}
            <Fade in timeout={2000}>
              <Box sx={{ mb: 6 }}>
                <Typography 
                  variant="h4" 
                  component="h2" 
                  gutterBottom 
                  sx={{ 
                    color: '#2d3748',
                    fontWeight: 700,
                    mb: 4,
                    display: 'flex',
                    alignItems: 'center',
                    gap: 2,
                    justifyContent: 'center'
                  }}
                >
                  <Lightbulb sx={{ color: '#667eea', fontSize: 40 }} />
                  技术实现详情
                </Typography>
                
                <Grid container spacing={3}>
                  <Grid size={{ xs: 12, md: 4 }}>
                    <FeatureCard>
                      <CardContent sx={{ p: 3 }}>
                        <Typography variant="h6" sx={{ fontWeight: 700, color: '#2d3748', mb: 2 }}>
                          🤖 机器学习
                        </Typography>
                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                          {['PyTorch', 'TensorFlow', 'OpenCV', 'NumPy', 'Pandas', 'Scikit-learn'].map((tech, idx) => (
                            <Chip 
                              key={idx} 
                              label={tech} 
                              size="small" 
                              variant="outlined" 
                              sx={{
                                animation: `${fadeInUp} 0.6s ease-out ${idx * 0.1}s both`,
                                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                                transform: 'translateY(20px)',
                                opacity: 0,
                                border: '2px solid #e2e8f0',
                                '&:hover': {
                                  transform: 'translateY(-2px) scale(1.05)',
                                  backgroundColor: '#667eea',
                                  color: 'white',
                                  boxShadow: '0 6px 20px rgba(102, 126, 234, 0.3)',
                                  border: '2px solid #667eea',
                                  fontWeight: 600,
                                }
                              }}
                            />
                          ))}
                        </Box>
                      </CardContent>
                    </FeatureCard>
                  </Grid>
                  
                  <Grid size={{ xs: 12, md: 4 }}>
                    <FeatureCard>
                      <CardContent sx={{ p: 3 }}>
                        <Typography variant="h6" sx={{ fontWeight: 700, color: '#2d3748', mb: 2 }}>
                          🌐 前端技术
                        </Typography>
                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                          {['React', 'TypeScript', 'Material-UI', 'Recharts', 'React Router', 'Axios'].map((tech, idx) => (
                            <Chip 
                              key={idx} 
                              label={tech} 
                              size="small" 
                              variant="outlined" 
                              sx={{
                                animation: `${fadeInUp} 0.6s ease-out ${idx * 0.1}s both`,
                                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                                transform: 'translateY(20px)',
                                opacity: 0,
                                border: '2px solid #e2e8f0',
                                '&:hover': {
                                  transform: 'translateY(-2px) scale(1.05)',
                                  backgroundColor: '#667eea',
                                  color: 'white',
                                  boxShadow: '0 6px 20px rgba(102, 126, 234, 0.3)',
                                  border: '2px solid #667eea',
                                  fontWeight: 600,
                                }
                              }}
                            />
                          ))}
                        </Box>
                      </CardContent>
                    </FeatureCard>
                  </Grid>
                  
                  <Grid size={{ xs: 12, md: 4 }}>
                    <FeatureCard>
                      <CardContent sx={{ p: 3 }}>
                        <Typography variant="h6" sx={{ fontWeight: 700, color: '#2d3748', mb: 2 }}>
                          ⚙️ 后端服务
                        </Typography>
                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                          {['Python', 'Flask', 'Docker', 'NGINX', 'Redis', 'PostgreSQL'].map((tech, idx) => (
                            <Chip 
                              key={idx} 
                              label={tech} 
                              size="small" 
                              variant="outlined" 
                              sx={{
                                animation: `${fadeInUp} 0.6s ease-out ${idx * 0.1}s both`,
                                transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
                                transform: 'translateY(20px)',
                                opacity: 0,
                                border: '2px solid #e2e8f0',
                                '&:hover': {
                                  transform: 'translateY(-2px) scale(1.05)',
                                  backgroundColor: '#667eea',
                                  color: 'white',
                                  boxShadow: '0 6px 20px rgba(102, 126, 234, 0.3)',
                                  border: '2px solid #667eea',
                                  fontWeight: 600,
                                }
                              }}
                            />
                          ))}
                        </Box>
                      </CardContent>
                    </FeatureCard>
                  </Grid>
                </Grid>
              </Box>
            </Fade>

            {/* 项目成果 */}
            <Fade in timeout={2400}>
              <Box sx={{ mb: 6 }}>
                <Typography 
                  variant="h4" 
                  component="h2" 
                  gutterBottom 
                  sx={{ 
                    color: '#2d3748',
                    fontWeight: 700,
                    mb: 4,
                    display: 'flex',
                    alignItems: 'center',
                    gap: 2,
                    justifyContent: 'center'
                  }}
                >
                  <EmojiEvents sx={{ color: '#667eea', fontSize: 40 }} />
                  项目成果与意义
                </Typography>
                
                <Grid container spacing={3}>
                  {[
                    {
                      title: '🎯 技术创新',
                      content: '成功将深度学习技术应用于医学影像分析领域，实现了高精度的脑肿瘤自动识别与分类'
                    },
                    {
                      title: '📈 性能优异',
                      content: '模型在测试集上达到97.33%的准确率，超越了传统机器学习方法的性能表现'
                    },
                    {
                      title: '🏥 实用价值',
                      content: '为医疗专业人员提供了可靠的诊断辅助工具，有助于提高诊断效率和准确性'
                    },
                    {
                      title: '🔬 学术贡献',
                      content: '项目成果可为相关领域的研究提供参考，推动医疗AI技术的进一步发展'
                    }
                  ].map((achievement, index) => (
                    <Grid size={{ xs: 12, md: 6 }} key={index}>
                      <FeatureCard>
                        <CardContent sx={{ p: 3 }}>
                          <Typography variant="h6" sx={{ fontWeight: 700, color: '#2d3748', mb: 2 }}>
                            {achievement.title}
                          </Typography>
                          <Typography variant="body1" sx={{ color: '#4a5568', lineHeight: 1.6 }}>
                            {achievement.content}
                          </Typography>
                        </CardContent>
                      </FeatureCard>
                    </Grid>
                  ))}
                </Grid>
              </Box>
            </Fade>

            {/* 免责声明 */}
            <Fade in timeout={2800}>
              <Box 
                sx={{
                  background: 'linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%)',
                  borderRadius: '16px',
                  padding: 3,
                  border: '1px solid #feb2b2',
                  textAlign: 'center'
                }}
              >
                <Typography variant="h6" sx={{ fontWeight: 700, color: '#c53030', mb: 2 }}>
                  ⚠️ 重要声明
                </Typography>
                <Typography variant="body1" sx={{ color: '#742a2a', lineHeight: 1.6 }}>
                  本项目仅用于学术研究和技术交流目的，不可用于实际医疗诊断。
                  任何医疗决策都应基于专业医师的判断和建议。
                  项目开发者不承担因使用本系统而产生的任何医疗责任。
                </Typography>
              </Box>
            </Fade>
          </Box>
        </Grow>
      </MainPaper>
    </MainContainer>
  );
};

export default AboutPage;